```jsx
import * as radio from "@zag-js/radio-group"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

const items = [
  { id: "apple", label: "Apples" },
  { id: "orange", label: "Oranges" },
  { id: "mango", label: "Mangoes" },
  { id: "grape", label: "Grapes" },
]

function Radio() {
  const service = useMachine(radio.machine, { id: createUniqueId() })

  const api = createMemo(() => radio.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <h3 {...api().getLabelProps()}>Fruits</h3>
      {items.map((opt) => (
        <label {...api().getItemProps({ value: opt.id })}>
          <span {...api().getItemTextProps({ value: opt.id })}>
            {opt.label}
          </span>
          <input {...api().getItemHiddenInputProps({ value: opt.id })} />
          <div {...api().getItemControlProps({ value: opt.id })} />
        </label>
      ))}
    </div>
  )
}
```
